{% extends "base.html" %}

{% block title %}安全验证 - 云水禅心居{% endblock %}

{% block extra_head %}
<style>
    .verify-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 250px);
    }
    
    /* From Uiverse.io by Praashoo7 - 优化后 */ 
    .form {
      width: 290px;
      height: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 15px;
      background-color: white;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      transition: .4s ease-in-out;
      padding: 2rem 1rem;
    }

    .form:hover {
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
      transform: scale(0.99);
    }

    .heading {
      text-align: center;
      color: black;
      font-weight: bold;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }

    .check {
      margin-bottom: 2rem;
    }

    .box {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 2.5rem;
      width: 100%;
    }

    .input {
      width: 2.5em;
      height: 2.5em;
      border-radius: 5px;
      border: none;
      outline: none;
      background-color: rgb(235, 235, 235);
      box-shadow: inset 3px 3px 6px #d1d1d1,
                inset -3px -3px 6px #ffffff;
      padding-left: 15px;
      transition: .4s ease-in-out;
      font-size: 1.2rem;
      text-align: center;
    }

    .input:hover {
      box-shadow: inset 0px 0px 0px #d1d1d1,
                inset 0px 0px 0px #ffffff;
      background-color: lightgrey;
    }

    .input:focus {
      box-shadow: inset 0px 0px 0px #d1d1d1,
                inset 0px 0px 0px #ffffff;
      background-color: lightgrey;
    }

    .btn1, .btn2 {
      width: 100%;
      height: 3em;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .4s ease-in-out;
      box-shadow: 1px 1px 3px #b5b5b5,
                 -1px -1px 3px #ffffff;
      margin-bottom: 1rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn1:active, .btn2:active {
      box-shadow: inset 3px 3px 6px #b5b5b5,
                inset -3px -3px 6px #ffffff;
    }
    
    .button-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* 隐藏浏览器自动添加的密码显示按钮 */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear,
    input[type="password"]::-webkit-contacts-auto-fill-button,
    input[type="password"]::-webkit-credentials-auto-fill-button {
      display: none !important;
      visibility: hidden;
      pointer-events: none;
    }
    
    /* From Uiverse.io by Allyhere */ 
    .btn-donate {
      --clr-font-main: hsla(0 0% 20% / 100);
      --btn-bg-1: hsla(194 100% 69% / 1);
      --btn-bg-2: hsla(217 100% 56% / 1);
      --btn-bg-color: hsla(360 100% 100% / 1);
      --radii: 0.5em;
      cursor: pointer;
      padding: 0.9em 1.4em;
      min-width: 120px;
      min-height: 44px;
      font-size: var(--size, 1rem);
      font-weight: 500;
      transition: 0.8s;
      background-size: 280% auto;
      background-image: linear-gradient(
        325deg,
        var(--btn-bg-2) 0%,
        var(--btn-bg-1) 55%,
        var(--btn-bg-2) 90%
      );
      border: none;
      border-radius: var(--radii);
      color: var(--btn-bg-color);
      box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
      width: 100%;
      margin-bottom: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-donate:hover {
      background-position: right top;
    }

    .btn-donate:is(:focus, :focus-visible, :active) {
      outline: none;
      box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-donate {
        transition: linear;
      }
    }
</style>
{% endblock %}

{% block content %}
<div class="verify-container">
    <!-- From Uiverse.io by Praashoo7 --> 
    <form class="form" method="POST" action="{{ url_for('verify_code') }}">
      <p class="heading">安全验证</p>
      <svg class="check" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" xml:space="preserve">  <image id="image0" width="60" height="60" x="0" y="0" href="
    AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
    cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0NDzN/r+StAAACR0lEQVRYw+3Yy2sTURTH8W+bNgVf
    aGhFaxNiAoJou3FVEUQE1yL031BEROjCnf4PLlxILZSGYncuiiC48AEKxghaNGiliAojiBWZNnNd
    xDza3pl77jyCyPzO8ubcT85wmUkG0qT539In+MwgoxQoUqDAKDn2kSNLlp3AGi4uDt9xWOUTK3xg
    hVU2wsIZSkxwnHHGKZOxHKfBe6rUqFGlTkPaVmKGn6iYao1ZyhK2zJfY0FZ9ldBzsbMKxZwZjn/e
    5szGw6UsD5I0W6T+hBhjUjiF7bNInjz37Ruj3igGABjbtpIo3GIh30u4ww5wr3fwfJvNcFeznhBs
    YgXw70TYX2bY/ulkZhWfzfBbTdtrzjPFsvFI+T/L35jhp5q2owDs51VIVvHYDM9sa/LY8XdtKy1l
    FXfM8FVN2/X2ajctZxVXzPA5TZvHpfb6CFXxkerUWTOcY11LX9w0tc20inX2mmF4qG3upnNWrOKB
    hIXLPu3dF1x+kRWq6ysHpkjDl+7eQjatYoOCDIZF3006U0unVSxIWTgTsI3HNP3soSJkFaflMDwL
    3OoHrph9YsPCJJ5466DyOGUHY3Epg2rWloUxnMjsNw7aw3AhMjwVhgW4HYm9FZaFQZ/bp6QeMRQe
    hhHehWKXGY7CAuSpW7MfKUZlAUqWdJ3DcbAAB3guZl9yKC4WYLfmT4muFtgVJwvQx7T2t0mnXK6J
    XlGGyAQvfNkaJ5JBmxnipubJ5HKDbJJsM0eY38QucSx5tJWTVHBwqDDZOzRNmn87fwDoyM4J2hRz
    NgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xM1QxMzoxNTo1MCswMDowMKC8JaoAAAAldEVY
    dGRhdGU6bW9kaWZ5ADIwMjMtMDItMTNUMTM6MTU6NTArMDA6MDDR4Z0WAAAAKHRFWHRkYXRlOnRp
    bWVzdGFtcAAyMDIzLTAyLTEzVDEzOjE1OjUxKzAwOjAwIIO3fQAAAABJRU5ErkJggg=="></image>
    </svg>
      <div class="box">
        <input class="input" type="text" maxlength="1" name="code1" inputmode="numeric" pattern="[0-9]" required>
        <input class="input" type="text" maxlength="1" name="code2" inputmode="numeric" pattern="[0-9]" required> 
        <input class="input" type="text" maxlength="1" name="code3" inputmode="numeric" pattern="[0-9]" required>
        <input class="input" type="text" maxlength="1" name="code4" inputmode="numeric" pattern="[0-9]" required>
      </div>
      <div class="button-container">
        <button type="submit" class="btn1">提交</button>
        <button type="button" class="btn-donate" id="show-code-btn">显示验证码</button>
        <a href="{{ url_for('index') }}" class="btn2" style="text-decoration: none; color: black; margin-top: 0.5rem;">返回</a>
      </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动焦点到下一个输入框
    const inputs = document.querySelectorAll('.input');
    
    inputs.forEach((input, index) => {
        input.addEventListener('input', function() {
            if (this.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });
        
        // 处理退格键
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });
    
    // 初始焦点
    inputs[0].focus();
    
    // 显示验证码按钮的点击事件
    document.getElementById('show-code-btn').addEventListener('click', function() {
        fetch('/show_verify_code')
            .then(response => {
                if (response.ok) {
                    alert('验证码已在控制台中显示');
                }
            })
            .catch(error => {
                console.error('显示验证码失败:', error);
            });
    });
});
</script>
{% endblock %} 